<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
 <#include "/header.ftl">
    <style>

        .project{
            width: 750px;
            height: 800px;
            margin-top: 100px;
        }
        .videoInfo{
            text-align: center;
            width: 800px;
            height: 900px;
            margin: 50px auto;
            padding-top: 50px;
            border-style: double;
            border-width: 10px;
            border-color: lightgray;
            border-radius: 50px;
        }
        *{
            margin: 0;
        }

    </style>
</head>
<body>
<div id="app">
    <h1>视频播放</h1>
    <div class="videoInfo">
        <div class="videoDiv">
            <h2>${video.videoName}</h2>
            <br><br><br>
            <video width="750"  controls="controls">
                <!-- <source src="videoInfo.videoPath" type="video/ogg"> -->
                <source src="/play?url=${video.videoPath}" type="video/mp4">
                <!-- <source src="videoInfo.videoPath" type="video/mp4"> -->
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="project">
            <el-form  ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules" class="demo-ruleForm">
                <el-form-item label="提问" prop="desc" >
                    <el-input type="textarea"   v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
<#include "/footer.ftl">
<script>

    let _this=new Vue({
        el:'#app',
        data:{
            videoInfo: '',
            ruleForm: {
                desc: ''
            },
            rules:{
                desc:[
                    { required: true, message: '请填写你的提问', trigger: 'blur'}
                ]
            }
        },
        created:function () {

        },
        methods: {
            submitForm(formName) {
                        this.$notify({
                            title: '成功',
                            message: '您的问题已提交，教师会尽快回复',
                            type:'success',
                            offset: 100
                        });
                // this.$refs[formName].validate((valid) => {
                //     if (valid) {
                //         this.$notify({
                //             title: '成功',
                //             message: '您的问题已提交，教师会尽快回复',
                //             type:'success',
                //             offset: 100
                //         });
                //     } else {
                //         // this.$notify.error({
                //         //   title: '失败',
                //         //   message: '提交失败，请填写信息',
                //         //   offset: 100
                //         // });
                //         return false;
                //     }
                // });

            },
            resetForm(formName) {
                this.ruleForm.desc=null;
            }
        }
    })

</script>
</body>
</html>
